<!--  -->
<template>
  <div style="padding-top:100px">
    <div class="app-title-container title-position">
      <modules-title titleName="操作日志">
        <template slot="btn">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple"
                v-hasPermi="{v:['log:operation:delete']}" @click="handleDelete">删除</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="danger" icon="el-icon-delete" size="mini"
                v-hasPermi="{v:['log:operation:clear']}" @click="handleClean">清空
              </el-button>
            </el-col>

          </el-row>
        </template>
      </modules-title>
    </div>
    <div style="padding:20px">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" size="small">

        <el-form-item label="操作人员">
          <el-input v-model="queryParams.condition.user_name" placeholder="请输入操作人员" clearable
            @keyup.enter.native="handleQuery" />
        </el-form-item>

        <el-form-item label="登录IP">
          <el-input v-model="queryParams.condition.ipaddr" placeholder="请输入登录IP" clearable
            @keyup.enter.native="handleQuery" />
        </el-form-item>

        <el-form-item label="手机号码">
          <el-input v-model="queryParams.condition.mobile" placeholder="请输入用户名称" clearable
            @keyup.enter.native="handleQuery" />
        </el-form-item>

        <el-form-item label="状态">
          <el-select v-model="queryParams.condition.status" placeholder="登录状态">
            <el-option v-for="dict in statusOptions" :key="dict.key" :label="dict.value"
              :value="dict.key" />
          </el-select>
        </el-form-item>

        <el-form-item label="操作时间">
          <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd"
            @change="timeChange" @keyup.enter.native="handleQuery" type="daterange"
            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索
          </el-button>
          <el-button plain icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        </el-form-item>

      </el-form>
      <el-table :data="list" @selection-change="handleSelectionChange" ref="multipleTable"
        :row-key="(row)=>{ return row.id}" border size="medium">
        <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />

        <el-table-column label="编号" width="120" align="center">
          <template slot-scope="scope">
            <span>{{(queryParams.pager.skip - 1) * queryParams.pager.limit + scope.$index + 1}}</span>
          </template>
        </el-table-column>

        <el-table-column label="手机号码" align="center" prop="mobile" />

        <el-table-column label="url地址" align="center" prop="url" :show-overflow-tooltip="true" />

        <el-table-column label="操作人员" align="center" prop="user_name" />

        <el-table-column label="登录IP" align="center" prop="ipaddr" width="130"
          :show-overflow-tooltip="true" />

        <el-table-column label="操作地点" align="center" prop="login_location"
          :show-overflow-tooltip="true" />

        <el-table-column label="操作状态" align="center" prop="status">
          <template slot-scope="scope">
            <span v-if="statusFormat(scope.row)=='成功'"
              class="status-color6">{{statusFormat(scope.row)}}</span>
            <span v-else-if="statusFormat(scope.row)=='失败'"
              class="status-color1">{{statusFormat(scope.row)}}</span>
            <span v-else>{{statusFormat(scope.row)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作时间" align="center" prop="oper_time" width="180">
          <template slot-scope="scope">
            <span>{{dateFormat1('yyyy-mm-dd HH:MM:SS',scope.row.created_at) }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="medium" type="text" icon="el-icon-view"
              @click="handleView(scope.row,scope.index)">详细</el-button>
          </template>
        </el-table-column>

      </el-table>
      <!--页码-->
      <pagination style="display:flex;justify-content:flex-end;" :total="total"
        @pagination="pagination" :page.sync="queryParams.pager.skip"
        :limit.sync="queryParams.pager.limit" />
    </div>

    <!-- 操作日志详细 -->
    <el-dialog title="操作日志详细" :visible.sync="open" width="850px" append-to-body
      :close-on-click-modal="false">
      <el-form ref="form" :model="form" label-width="100px" size="mini">
        <el-row>
          <el-col :span="12">

            <el-form-item label="操作模块：">{{ form.title }} </el-form-item>

            <el-form-item label="登录信息：">{{ form.user_name }} / {{ form.ipaddr }} /
              {{ form.login_location }} </el-form-item>

          </el-col>

          <el-col :span="24">
            <el-form-item label="请求方式：">{{ form.method }}</el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="请求地址：">{{ form.url }}</el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="请求参数：">{{ form.body }}</el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="返回参数：">{{ form.resp }}</el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="操作状态：">
              <div v-if="form.status === 1">成功</div>
              <div v-else>失败</div>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="错误信息：" v-if="form.status === -1">{{ form.error_msg }}
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="操作时间：">{{ dateFormat1('yyyy-mm-dd HH:MM:SS',form.created_at) }}
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { optionLog, optionDelete, optionClear } from "@/api/system";
export default {
  data() {
    return {
      multiple: true,
      dateRange: [],
      queryParams: {
        pager: {
          skip: 1,
          limit: 10
        },
        condition: {
          ipaddr: "",
          mobile: "",
          status: 0,
          user_name: "",
          start_time: "",
          end_time: ""
        }
      },
      typeOptions: [
        { key: "1", value: "新增" },
        { key: "2", value: "修改" },
        { key: "3", value: "删除" },
        { key: "4", value: "授权" },
        { key: "5", value: "导出" },
        { key: "6", value: "导入" },
        { key: "7", value: "强退" },
        { key: "8", value: "生成代码" },
        { key: "9", value: "清空数据" }
      ],
      statusOptions: [
        { key: 0, value: "全部" },
        { key: 1, value: "成功" },
        { key: -1, value: "失败" }
      ],
      list: [],
      ids: [],
      form: {},
      open: false,
      total: 0
    };
  },
  //是计算属性，也可以理解为一个方法。
  computed: {},
  //属性是手动定义的所需监听的值
  watch: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.optionLogData();
  },
  //是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，未调用不会执行，只执行逻辑，返回值可有可无
  methods: {
    //获取列表
    optionLogData() {
      optionLog(this.queryParams).then(res => {
        if (res.code === 200) {
          this.list = res.data.data || [];
          this.total = res.data.total;
        }
      });
    },
    //页码
    pagination(val) {
      this.queryParams.pager.skip = val.page;
      this.queryParams.pager.limit = val.limit;
      this.optionLogData();
    },
    //删除按钮操作 */
    handleDelete() {
      let data = {
        ids: this.ids
      };
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          optionDelete(data).then(res => {
            if (res.code === 200) {
              this.$message.success("删除成功");
              if (this.list.length === 1) {
                this.queryParams.pager.skip -= 1;
              }
              this.optionLogData();
              this.$refs.multipleTable.clearSelection();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {});
    },
    // 清空按钮操作 */
    handleClean() {
      this.$confirm("此操作将永久清除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          optionClear().then(res => {
            if (res.code === 200) {
              this.$message.success("清除成功");
              this.optionLogData();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {});
    },
    //搜索
    handleQuery() {
      this.queryParams.pager.skip = 1;
      this.optionLogData();
    },
    //重置
    resetQuery() {
      this.queryParams = {
        pager: {
          skip: 1,
          limit: 10
        },
        condition: {
          ipaddr: "",
          mobile: "",
          status: 0,
          user_name: "",
          start_time: "",
          end_time: ""
        }
      };
      this.dateRange = [];
      this.optionLogData();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.multiple = !selection.length;
    },
    // 操作日志状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    /** 详细按钮操作 */
    handleView(row) {
      this.open = true;
      this.form = row;
    },
    timeChange(val) {
      console.log(val);
      this.queryParams.condition.start_time = `${val[0]} 00:00:00`;
      this.queryParams.condition.end_time = `${val[1]} 23:59:59`;
    }
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
::v-deep .el-button--medium {
  padding: 0;
}
</style>
